<template>
  <div class="vue-box">
    <div class="c-panel">
      <!-- 参数栏 -->
      <div class="c-title">检索参数</div>
      <el-form @submit.native.prevent class="conditional_filter">
        <sa-item v-model="p.search" type="text" name="模糊搜索" />
        <sa-item v-model="p.status" type="enum" jtype="4" :jv="dims.YES_OR_NO" name="启用状态" :def="{}" :clearable="true"
          br />
        <el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
      </el-form>
      <!-- ------------- 快捷按钮 ------------- -->
      <sa-item type="fast-btn" show="add,get,delete,export,reset" />
      <!-- 数据列表 -->
      <el-table ref="data-table" class="data-table" :data="dataList" border>
        <el-table-column type="selection" width="45px" />
        <el-table-column label="编号" type="index" width="160px" />
        <el-table-column label="参数名" prop="name">
        </el-table-column>
        <el-table-column label="编码" prop="code">
        </el-table-column>
        <el-table-column label="参数类型" prop="type">
          <template slot-scope="s">
            <span v-for="(v, k) in dims.PROP_TYPE" :key="k" v-if="s.row.type === k"> {{ v }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参数值" prop="val">
        </el-table-column>
        <el-table-column label="值类型" prop="valType">
          <template slot-scope="s">
            <span v-for="(v, k) in dims.PROP_VAL_TYPE" :key="k" v-if="s.row.valType === k"> {{ v }}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="80px">
          <template slot-scope="s">
            <el-switch v-model="s.row.status" :active-value="1" :inactive-value="0" inactive-color="#ff4949"
              @change="updateStatus(s.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="s">
            {{ sa.forDate(s.row.createTime, 2) }}
          </template>
        </el-table-column>
        <sa-td name="操作" fixed="right" width="120px">
          <template slot-scope="s">
            <el-button type="text" @click="update(s.row)">
              变更
            </el-button>
            <el-button type="text" @click="del(s.row)">
              <span style="color: red;">
                删除
              </span>
            </el-button>
          </template>
        </sa-td>
      </el-table>
      <!-- 分页 -->
      <sa-item type="page" :curr.sync="p.current" :size.sync="p.size" :total="dataCount" @change="f5()" />
    </div>
  </div>
</template>

<script>
import sa from '@/sa-frame/sa';

export default {
  name: 'property-list',
  data() {
    return {
      // 查询参数
      p: {
        current: 1,
        size: 10,
        code: null,
        search: null,
        status: null,
        type: null,
        sortField: 'id desc'
      },
      dataCount: null,
      // 数据集合
      dataList: [],
      // 字典
      dims: {},
    }
  },
  created: function () {
    let gd = sa.$sys.getCurd()
    if (gd) {
      this.dims = gd
    } else {
      sa.error('未获取到字典信息！');
    }
    this.f5();
    sa.onInputEnter();
  },
  methods: {
    // 刷新
    f5: function () {
      sa.ajax('/prop/getList', sa.removeNull(this.p), function (res) {
        this.dataList = res.data;
        this.dataCount = res.dataCount;
        // 刷新表格高度
        sa.f5TableHeight();
      }.bind(this), { type: "post" });
    },
  }
}
</script>

<style scoped></style>
